import React, { useState } from "react";
import ReactECharts from "echarts-for-react";
import { useSelector } from "umi";
import { cn } from "@/utils/twMerge";
const PieComponent = ({ data = {} }: any) => {
  const laoding = useSelector((state: any) => state.loading);
  console.log(data);
  const option = {
    xAxis: {
      type: "category",
      data: data.value?.map((item: any) => item.date),
    },
    yAxis: {
      type: "value",
    },
    dataZoom: [
      {
        type: "inside",
      },
      {
        type: "slider",
      },
    ],
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    series: [
      {
        data: data.value?.map((item: any) => item.value),
        type: "bar",
      },
    ],
  };
  return (
    <div className={cn(" w-full h-[400px] bg-white rounded-md p-4 ")}>
      <div className="text-xl h-10">{data.title}</div>
      <ReactECharts option={option} />
    </div>
  );
};

export default PieComponent;
